<template>
    <div class="vehcle-detail">
        <el-header>
            <p>车辆详情</p>
        </el-header>
        <el-main>
            <div class="vehicle">
                <p>我的车辆</p>
                <el-table
                    class="detail"
                    :data="detailData"
                    style="width: 100%"
                    border>
                    
                    <el-table-column
                        prop="vin"
                        label="Vin码">
                    </el-table-column>
                    <el-table-column
                        prop="license"
                        label="车牌">
                    </el-table-column>
                    <el-table-column
                        prop="type"
                        label="车系车型">
                    </el-table-column>
                    <el-table-column
                        prop="time"
                        label="上次登录时间">
                    </el-table-column>
                    
                </el-table>
            </div>
            <div class="inform">
                <div class="info-top">
                    <p>车辆安全</p>
                    <router-link :to="{ name: 'DangeDetail' }" style="color: #7BB0FF; font-size: 14px">查看详情</router-link>
                </div>
                <div class="v-line">
                    <div class="select-time">
                        <el-radio-group v-model="selectTime" @change="changeTime">
                            <el-radio-button label="今日"></el-radio-button>
                            <el-radio-button label="最近7日"></el-radio-button>
                            <el-radio-button label="最近30日"></el-radio-button>
                            <el-radio-button label="自定义"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <ve-line
                    :title="title"
                    :loading="isLoading"
                    :data-empty="isEmpty"
                    :data="chartData"
                    :settings="chartSettings"
                    :legend-visible="false"
                    :judge-width="true">
                    </ve-line>
                </div>
                
                
            </div>
        </el-main>
        <router-view></router-view>
    </div>
</template>

<script>
import "echarts/lib/component/title";  // 如果要用标题需要先引入标题组件
export default {
    name: 'VehcleDetail',
    data() {
        this.chartSettings = {
            metrics: ['次数'],  // 指标
            dimension: ['危险驾驶行为'],  // 维度
            xAxisType: 'category',
            scale: [true, true],
            area: true
        },
        this.title = {
            show: true,
            text: 'DMS危险驾驶行为分析报告',
            textStyle: {
                color: '#999',
                fontSize: 16,
                fontWeight: 400
            }
        }
        return {
            selectTime: '今日',
            detailData: [
                {
                    vin: '1G1BL52P7TR115520', license: '沪A 88888', type: '东风雪铁龙', time: '2019-07-29 14:35:34'
                }
            ],
            isLoading: false,
            isEmpty: false,
            chartData:{
                columns: ['危险驾驶行为', '次数'],
                rows: [
                    { '危险驾驶行为': '疲劳驾驶', '次数': 0 },
                    { '危险驾驶行为': '接电话', '次数': 6 },
                    { '危险驾驶行为': '抽烟', '次数': 8 },
                    { '危险驾驶行为': '左顾右盼', '次数': 10 }
                ]
            }
        }
    },
    methods: {
        
        changeTime(val){
            console.log(val)
        }
    }
}
</script>

<style lang="scss" scoped>
.vehcle-detail{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 20;
    .el-header{
        height: 64px !important;
        line-height: 64px;
        p{
            font-weight: bold;
        }
    }
    .el-main{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 64px;
        .vehicle{
            .detail{
                margin-top: 20px;
            }
        }
        .inform{
            margin-top: 20px;
            .info-top{
                padding-right: 20px;
                display: flex;
                justify-content: space-between;
            }
            .v-line{
                position: relative;
                margin-top: 20px;
                .select-time{
                    position: absolute;
                    top: 0;
                    right: 0;
                    z-index: 21;
                }
            }
        }
    }
}
</style>

